<template>
<!-- 全部分类 -->
	<view class="row">
		<view class="span-4 left-menus" >
			<van-sidebar v-model="activeKey" @change="onChange">
				<van-sidebar-item v-for="(item,index) in categoryList" :key="index" :title="item.goods_type_name"
					@click="sliderClick(item)" />
			</van-sidebar>
		</view>
		<view class="span-16">
			<!-- 排序|筛选 -->
			<view class="d-flex word border-bottom a-center  bg-white" style="height: 44px;z-index: 100;">
				<!-- 				<view class="flex-1 d-flex a-center j-center" :class="screen.currentIndex==3?'main-text-color':'text-muted'" @tap="changeScreen(3)">
					人气
				</view>
				<view class="flex-1 d-flex a-center j-center" :class="screen.currentIndex==4?'main-text-color':'text-muted'" @tap="changeScreen(4)">
					最新
				</view> -->
				<view class="flex-1 d-flex a-center  j-center font-md font-top-sm" v-for="(item,index) in screen.list" :key="index"
					@tap="changeScreen(index)">
					<text :class="screen.currentIndex === index ? 'main-text-color' : 'text-muted'">{{item.name}}</text>
					<view v-if="item.isSingle=='n'">
						<view class="iconfont icon-paixu-shengxu line-h0"
							:class="item.status===1?'main-text-color':'text-light-muted'">
						</view>
						<view class="iconfont icon-paixu-jiangxu line-h0"
							:class="item.status===2?'main-text-color':'text-light-muted'">
						</view>
					</view>
				</view>
			</view>
			<!--商品列表-->
					<van-pull-refresh
						:pulling-text="i18n.common.pulling_text"
						:loosing-text="i18n.common.loosing_text"
						:loading-text="i18n.common.loading"
						v-model="refreshing"
						@refresh="onRefresh"
						style="overflow: hidden;overflow-y: auto;"
						:style="'height:'+goodListScreenHeight+'px'">
						<van-list
							v-model="loading"
							:finished="finished"
							:finished-text="i18n.common.no_more"
							@load="onLoad2">
							<block v-for="(item,index) in goodsList" :key="index">
								<view class="d-flex bg-white border-bottom" style="height: 200rpx;" @click="lotteryDetail(item)">
									<view class="left p-2">
										<image style="width: 110rpx;height: 110rpx;"  :src="item.good_header"></image><!-- mode="widthFix" -->
									</view>
									<view class="right d-flex flex-column px-2 list-pt">
										<view class="py-1 title list-cp" style="width: 400rpx;">
											{{item.good_name}}
										</view>
										<view class="pb-1" style="margin-bottom: 20upx;">
											<text
												style="border: 1px solid #f6ca4f ;border-radius: 10px; padding: 6upx;"
												class="text-warning text-xs f10">
													<!-- {{item.is_immediate_lottery=='y'?'急速开奖':'火币开奖'}} -->
													{{item.is_immediate_lottery == 'y' ? i18n.home_page.all_fl.t2 : i18n.home_page.all_fl.t3}}
											</text>
										</view>
										<view class="d-flex j-sb">
											<view class="py-1" style="width: 320rpx;">
												<!-- <van-progress :show-pivot="false" stroke-width="5px"
													color="rgb(243, 145, 43)" :percentage="item.progress" /> -->
													<progress :percent="item.progress" active activeColor="#E93323"
														stroke-width="4"  :duration="15" backgroundColor="#ebedf0" />
												<view class="d-flex j-sb font-13">
													<text class="f10">
														<!-- 总需{{item.need_people}} -->
														{{i18n.home_page.all_fl.t7}}{{item.need_people}}
													</text>
													<text class="f10">
														<!-- 剩余{{item.need_people-item.now_people}} -->
														{{i18n.home_page.tips.t13}}{{item.need_people-item.now_people}}
													</text>
												</view>
											</view>
											<view>
												<image style="width: 40rpx;" mode="widthFix"
													src="/static/img/xinyuandan.png"></image>
											</view>
										</view>
									</view>
								</view>
							</block>
						</van-list>
					</van-pull-refresh>
			
		</view>
	</view>

</template>

<script>
	import {
		Notify
	} from 'vant';

	import {
		getLotteryGoodTypes,
		getLotteryGoodTypeList,
		getIndexGoodsList
	} from '@/api/lottery.js';

	export default {
		onLoad() {
			//异步获取首页数据
			Promise.all([this.getGoodsType()]);
			let _this = this
				uni.getSystemInfo({
				    success: function (res) {
				        console.log(res.windowWidth);
				        console.log(res.windowHeight);
						_this.goodListScreenHeight=res.windowHeight-44;
				    }
				});
		},
		data() {
			//[[;'';'\']]
			return {
				//商品列表屏幕有高度
				goodListScreenHeight:0,
				activeKey: 0,
				categoryList: [], // 商品分类
				// categoryList: [{
				// 	name: "全部商品",
				// 	"id": "1"
				// }, {
				// 	name: "轻奢专区",
				// 	"id": "2"
				// }, {
				// 	name: "选号专区",
				// 	"id": "3"
				// }, {
				// 	name: "财富数码",
				// 	"id": "4"
				// }, {
				// 	name: "家居用品",
				// 	"id": "5"
				// }, {
				// 	name: "食品酒水",
				// 	"id": "6"
				// }],
				// screen: {
				// 	currentIndex: 0,
				// 	list: [{
				// 			name: "人气",
				// 			status: 0,
				// 			key: "all",
				// 			isSingle: 'y',
				// 			order: 'now_people'
				// 		}, {
				// 			name: "最新",
				// 			status: 0,
				// 			key: "all",
				// 			isSingle: 'y',
				// 			order: 'create_time'
				// 		}, {
				// 			name: "进度",
				// 			status: 0,
				// 			key: "all",
				// 			isSingle: 'n',
				// 			order: 'progress'
				// 		},
				// 		{
				// 			name: "总需",
				// 			status: 0,
				// 			key: "sale_count",
				// 			isSingle: 'n',
				// 			order: 'need_people'
				// 		}
				// 	]
				// },
				goodsList: [{
					id: "1",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "到时开奖",
					"endTime": 1615300325
				}, {
					id: "2",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "到时开奖",
					"endTime": 1615300325
				}, {
					id: "3",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "急速秒开",
					"endTime": 1615300325
				}, {
					id: "4",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "急速秒开",
					"endTime": 1615300325
				}, {
					id: "4",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "急速秒开",
					"endTime": 1615300325
				}, {
					id: "4",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "急速秒开",
					"endTime": 1615300325
				}, {
					id: "4",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "急速秒开",
					"endTime": 1615300325
				}, {
					id: "4",
					src: "https://static.wojiufafa.cn/pro/8795d2dc690ab797647d9d329c9b4864.jpg",
					title: " 荣耀（HONOR）FlyPods 3无线耳机白",
					period: "11111",
					"allpeople": "222",
					"needpeople": "33",
					"nowpeople": "11",
					"mode": "急速秒开",
					"endTime": 1615300325
				}],
				loading: false,
				finished: false,
				refreshing: false,
				currentPage: 1,
				currentQueryData:{},
				selectedItem:{}
			};
		},
		computed: {
			i18n() {
				return this.$t("index")
			},
			// categoryList() {
			// 	return [{
			// 		name: this.i18n.home_page.all_fl.t8, // "全部商品",
			// 		"id": "1"
			// 	}, {
			// 		name: this.i18n.home_page.all_fl.t9, /// "轻奢专区",
			// 		"id": "2"
			// 	}, {
			// 		name: this.i18n.home_page.all_fl.t10, // "选号专区",
			// 		"id": "3"
			// 	}, {
			// 		name: this.i18n.home_page.all_fl.t11, // "财富数码",
			// 		"id": "4"
			// 	}, {
			// 		name: this.i18n.home_page.all_fl.t12, // "家居用品",
			// 		"id": "5"
			// 	}, {
			// 		name: this.i18n.home_page.all_fl.t13, // "食品酒水",
			// 		"id": "6"
			// 	}]
			// },
			screen() {
				return {
					currentIndex: 0,
					list: [{
							name: this.i18n.home_page.all_fl.t4, // "人气",
							status: 0,
							key: "all",
							isSingle: 'y',
							order: 'now_people'
						}, {
							name: this.i18n.home_page.all_fl.t5, // "最新",
							status: 0,
							key: "all",
							isSingle: 'y',
							order: 'create_time'
						}, {
							name: this.i18n.home_page.all_fl.t6, // "进度",
							status: 0,
							key: "all",
							isSingle: 'n',
							order: 'progress'
						},
						{
							name: this.i18n.home_page.all_fl.t7, // "总需",
							status: 0,
							key: "sale_count",
							isSingle: 'n',
							order: 'need_people'
						}
					]
				}
			}
		},
		onReady: function() {
			uni.setNavigationBarTitle({
				title: this.i18n.home_page.all_fl.t1
			});
		},
		methods: {
			//请求抽奖详情页面
			lotteryDetail(item) {
				console.log(item.id)
				uni.navigateTo({
					url: '/pages/lottery/good_details/good_details?id=' + item.id
				});
			},
			onChange(index) {
				//Notify({ type: 'primary', message: index });
			},
			sliderClick(item) {
				let that = this;
				if (item.goods_type_name == "全部商品") {
					item = {};
					item.id = null;
					item.goods_type_name = null
				}
				getLotteryGoodTypeList({
					goodsTypeId: item.id,
					goodsTypeName: item.goods_type_name
				}).then(res => {
					that.$set(that, "goodsList", res.goodsTypeList);
				});
				that.selectedItem=item;
			},
			// 获取商品类型
			getGoodsType() {
				let that=this;
				getLotteryGoodTypes().then(res => {
					console.log('获取商品类型', res)
					that.$set(that, "categoryList", res.goodsTypeList);
					that.categoryList.unshift({
						"goods_type_name": this.i18n.home_page.all_fl.t8 // "全部商品"
					})
					that.$set(that, "goodsList", res.goodsTypeListNew);
					that.selectedItem=res.goodsTypeList[0];
				});
			},
			changeScreen(index) {
				// 判断当前点击是否已经是激活状态
				let oldIndex = this.screen.currentIndex
				let oldItem = this.screen.list[oldIndex]
				if (oldIndex === index) {
					oldItem.status = oldItem.status === 1 ? 2 : 1;
					let data = {};
					data = {
						goodsTypeId:this.selectedItem.id,
						order_by_name: oldItem.order,
						order_by_rule: oldItem.status == 1 ? 'asc' : 'desc',
						page: 0,
						limitNum: 0
					};
					// 加载数据
					this.getData(data);
					this.currentQueryData=data;
					return
				}
				let newIitem = this.screen.list[index]
				// 移除旧激活状态
				oldItem.status = 0
				this.screen.currentIndex = index
				// 增加新激活状态
				newIitem.status = 1

				let data = {};
				if (newIitem.isSingle == 'y') {
					data = {
						goodsTypeId:this.selectedItem.id,
						order_by_name: newIitem.order,
						order_by_rule: 'desc',
						page: 0,
						limitNum: 0
					};
				} else {
					data = {
						goodsTypeId:this.selectedItem.id,
						order_by_name: newIitem.order,
						order_by_rule: newIitem.status == 1 ? 'asc' : 'desc',
						page: 0,
						limitNum: 0
					};
				}
				this.currentQueryData=data;
				// 加载数据
				this.getData(data);
			},
			onLoad2() {
				// console.log("onLoad2")
				// setTimeout(() => {
				// 	let goodsListTemp = this.goodsList;
				// 	if (this.refreshing) {
				// 		this.goodsList = [];
				// 		this.refreshing = false;
				// 	}
				// 	//加载新的数据
				// 	for (var x in goodsListTemp) {
				// 		this.goodsList.push(x);
				// 	}
				// 	this.loading = false;
				// 	this.finished = true;
				// 	// if (this.list.length >= 3) {
				// 	// 	this.finished = true;
				// 	// }
				// }, 1000);
				this.loading=false;
				this.finished=true;
			},
			onRefresh() {
				// 清空列表数据
				//this.finished = false;
				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				//this.loading = true;
				let that=this;
				setTimeout(() => {
					getLotteryGoodTypeList({
						goodsTypeId: that.selectedItem.id,
						goodsTypeName: that.selectedItem.goods_type_name
					}).then(res => {
						that.$set(that, "goodsList", res.goodsTypeList);
						this.refreshing = false; //表示不刷新状态
					});
					//this.finished = true;
				}, 500);
				//this.onLoad2();
			},
			getData(data) {
				 let that=this;
                   getIndexGoodsList(data).then(res=>{
					   that.$set(that, "goodsList", res);
				   })
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 自定义图标库 */
	@import "/common/icon.css";
	@import "/common/font.css";

	// $mainColor: #f6ca4f;
	$mainColor: #fc4141;

	.van-sidebar-item--select {
		color: $mainColor;
		// white-space: normal;
	}

	.van-sidebar-item--select::before {
		background-color: $mainColor;
		position: absolute;
		top: 50%;
		left: 0;
		width: 2px;
		height: 100%;
		background-color: #ee0a24;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
		content: '';
	}

	.van-sidebar-item {
		padding: 12px 12px;
	}

	/* 主字体颜色（橙色）*/
	.main-text-color {
		color: $mainColor;
	}

	/* 主边框颜色 */
	.main-border-color {
		border-color: #F1F1F1;
	}

	.right {
		.title {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			padding-bottom: 20upx;
		}
	}

	.left-menus{
		// padding: 12px;
		background-color: #f7f8fa;	
	}
	.van-sidebar{
		width: 100%;
	}
	/deep/ .van-sidebar-item__text{
		font-size: 12px;
		word-break: break-word !important;
	}
	.van-sidebar-item{
		font-size: 12px;
	} ///dffddfdf
	.font-top-sm{
		font-size: 12px;
	}
	.font-13{
		font-size: 12px;
	}
	.font-12{
		padding: 6upx;
		font-size: 12px;
	}
	.list-pt{
		padding-top: 20upx;
		padding-bottom: 20upx;
	}
	.list-cp{
		font-size: 24rpx;
	}
</style>
